<template>
	<div class="error-container">
		error
		<ElForm ref="formRef" />
		<!-- 示例1: 使用默认的 padding 和 theme，通过 class 设置 margin -->
		<MyTag text="Default" class="tag-margin" />

		<!-- 示例2: 自定义 padding 和 theme，通过 class 设置 margin -->
		<MyTag
			text="Custom Padding"
			padding="5px 20px"
			theme="blue"
			class="tag-margin"
		/>

		<!-- 示例3: 不同的 margin 和 theme -->
		<MyTag
			text="Another Margin"
			theme="#2c3e50"
			class="another-tag-margin"
		/>

		<!-- 示例4: 直接使用 style 属性控制 margin -->
		<MyTag text="Inline Style" theme="green" style="margin-left: 50px" />
	</div>
</template>

<script setup lang="ts">
import { useCompRef } from "@/hooks/useCompRef";
import { ElForm } from "element-plus";
// 获取ts类型提示 InstanceType
const formRef = useCompRef<typeof ElForm>();
console.log(formRef.value?.validate);


// formRef.value?.validate
</script>

<style scoped lang="less">
.error-container {
	background: @button-bg;
	color: @color;
}

.tag-margin {
	margin: 15px;
}

.another-tag-margin {
	margin-top: 30px;
	margin-bottom: 30px;
}
</style>
